<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_element": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_element": "active",
      "images": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">Images</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="td-title">Images</h1>
        <p class="td-lead">Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. </p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Responsive Images</h4>
        <p class="mg-b-30">Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.</p>

        <div data-label="Preview" class="td-example">
          <img src="https://via.placeholder.com/640x426" class="img-fluid" alt="Responsive image">
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;img src="..." class="img-fluid" alt="Responsive image"&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Image Thumbnails</h4>
        <p class="mg-b-30">In addition to our border-radius utilities, you can use <code>.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>

        <div data-label="Preview" class="td-example">
          <img src="https://via.placeholder.com/640x426" class="img-thumbnail wd-100p wd-sm-200" alt="Responsive image">
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;img src="https://via.placeholder.com/500" class="img-thumbnail" alt="Responsive image"&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Aligning Images</h4>
        <p class="mg-b-30">Align images with the helper float classes or text alignment classes.</p>

        <div data-label="Preview" class="td-example clearfix">
          <img src="https://via.placeholder.com/640x426" class="rounded float-sm-left wd-100p wd-sm-200" alt="">
          <img src="https://via.placeholder.com/640x426" class="rounded float-sm-right wd-100p wd-sm-200 mg-t-10 mg-sm-t-0" alt="">
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;img src="https://via.placeholder.com/640x426" class="rounded float-left" alt=""&gt;
&lt;img src="https://via.placeholder.com/640x426" class="rounded float-right" alt=""&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Background Image</h4>
        <p class="mg-b-30">Make image as background to your content using the helper or utilities classes.</p>

        <div data-label="Preview" class="td-example">
          <figure class="pos-relative mg-b-0 wd-sm-80p wd-md-50p">
            <img src="https://via.placeholder.com/640x426" class="img-fit-cover" alt="Responsive image">
            <figcaption class="pos-absolute a-0 pd-25 tx-white-8">
              <h6 class="tx-14 tx-sm-16 tx-white tx-semibold mg-b-15 mg-sm-b-20">What Does Royalty-Free Mean?</h6>
              <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</p>
            </figcaption>
          </figure>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;figure class="pos-relative mg-b-0 wd-lg-50p"&gt;
  &lt;img src="..." class="img-fit-cover" alt="Responsive image"&gt;
  &lt;figcaption class="pos-absolute a-0 pd-25 tx-white-8"&gt;
    &lt;h6 class="tx-white tx-semibold mg-b-20"&gt;What Does Royalty-Free Mean?&lt;/h6&gt;
    &lt;p class="mg-b-0"&gt;...&lt;/p&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Image Toolbar</h4>
        <p class="mg-b-30">Display toolbar by using button group component to image with the help of utilities classes.</p>

        <div data-label="Preview" class="td-example">
          <figure class="pos-relative mg-b-0 wd-md-50p">
            <img src="https://via.placeholder.com/640x426" class="img-fit-cover" alt="Responsive image">
            <figcaption class="pos-absolute b-0 l-0 wd-100p pd-20 d-flex justify-content-center">
              <div class="btn-group">
                <a href="" class="btn btn-dark btn-icon"><i data-feather="download"></i></a>
                <a href="" class="btn btn-dark btn-icon"><i data-feather="edit-2"></i></a>
                <a href="" class="btn btn-dark btn-icon"><i data-feather="maximize-2"></i></a>
                <a href="" class="btn btn-dark btn-icon"><i data-feather="trash-2"></i></a>
              </div>
            </figcaption>
          </figure>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;figure class=&quot;pos-relative mg-b-0 wd-lg-50p&quot;&gt;
  &lt;img src=&quot;https://via.placeholder.com/640x426&quot; class=&quot;img-fit-cover&quot; alt=&quot;Responsive image&quot;&gt;
  &lt;figcaption class=&quot;pos-absolute b-0 l-0 wd-100p pd-20 d-flex justify-content-center&quot;&gt;
    &lt;div class=&quot;btn-group&quot;&gt;
      &lt;a href=&quot;&quot; class=&quot;btn btn-dark btn-icon&quot;&gt;&lt;i data-feather=&quot;download&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a href=&quot;&quot; class=&quot;btn btn-dark btn-icon&quot;&gt;&lt;i data-feather=&quot;edit-2&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a href=&quot;&quot; class=&quot;btn btn-dark btn-icon&quot;&gt;&lt;i data-feather=&quot;maximize-2&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a href=&quot;&quot; class=&quot;btn btn-dark btn-icon&quot;&gt;&lt;i data-feather=&quot;trash-2&quot;&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Caption on Hover</h4>
        <p class="mg-b-30">Display caption of an image by hovering the image with the use of utilities class.</p>

        <div data-label="Preview" class="td-example">
          <div class="row row-sm">
            <div class="col-md">
              <figure class="img-caption pos-relative mg-b-0">
                <img src="https://via.placeholder.com/640x426" class="img-fit-cover" alt="Responsive image">
                <figcaption class="pos-absolute a-0 wd-100p pd-20 d-flex flex-column justify-content-center bg-white-9 transition-base op-0">
                  <h6 class="tx-14 tx-sm-16 tx-inverse tx-semibold mg-b-15 mg-sm-b-20">What Does Royalty-Free Mean?</h6>
                  <p class="mg-b-0">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</p>
                </figcaption>
              </figure>
            </div><!-- col -->
            <div class="col-md mg-t-10 mg-md-t-0">
              <figure class="img-caption pos-relative mg-b-0">
                <img src="https://via.placeholder.com/640x426" class="img-fit-cover" alt="Responsive image">
                <figcaption class="pos-absolute a-0 wd-100p pd-20 d-flex flex-column justify-content-center bg-black-8 transition-base op-0">
                  <h6 class="tx-14 tx-sm-16 tx-white tx-semibold mg-b-15 mg-sm-b-20">What Does Royalty-Free Mean?</h6>
                  <p class="mg-b-0 tx-white-7">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</p>
                </figcaption>
              </figure>
            </div><!-- col -->
          </div><!-- row -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;figure class=&quot;img-caption pos-relative mg-b-0&quot;&gt;
  &lt;img src=&quot;https://via.placeholder.com/640x426&quot; class=&quot;img-fit-cover&quot; alt=&quot;Responsive image&quot;&gt;
  &lt;figcaption class=&quot;pos-absolute a-0 wd-100p pd-20 d-flex flex-column justify-content-center bg-white-9 transition-base op-0&quot;&gt;
    &lt;h6 class=&quot;tx-inverse tx-semibold mg-b-20&quot;&gt;What Does Royalty-Free Mean?&lt;/h6&gt;
    &lt;p class=&quot;mg-b-0&quot;&gt;...&lt;/p&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

        <pre><code class="language-js">&lt;script&gt;
  $(function(){
    'use strict'

    $('.img-caption').on('mouseover mouseout', function(){
      $(this).find('figcaption').toggleClass('op-0');
    });

  });
&lt;/script&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section7" class="mg-b-10">Image Group</h4>
        <p class="mg-b-30">This is a group of images overlapping each other.</p>

        <div data-label="Example" class="td-example">
          <div class="img-group">
            <img src="https://via.placeholder.com/350" class="img wd-40 wd-sm-60 ht-40 ht-sm-60 rounded-circle" alt="">
            <img src="https://via.placeholder.com/600" class="img wd-40 wd-sm-60 ht-40 ht-sm-60 rounded-circle" alt="">
            <img src="https://via.placeholder.com/500" class="img wd-40 wd-sm-60 ht-40 ht-sm-60 rounded-circle" alt="">
            <img src="https://via.placeholder.com/500" class="img wd-40 wd-sm-60 ht-40 ht-sm-60 rounded-circle" alt="">
            <img src="https://via.placeholder.com/500" class="img wd-40 wd-sm-60 ht-40 ht-sm-60 rounded-circle" alt="">
            <img src="https://via.placeholder.com/500" class="img wd-40 wd-sm-60 ht-40 ht-sm-60 rounded-circle" alt="">
          </div><!-- img-group -->
        </div><!-- td-example -->

        <pre><code class="language-html">&lt;div class=&quot;img-group&quot;&gt;
  &lt;img src=&quot;...&quot; class=&quot;img wd-60 ht-60 rounded-circle&quot; alt=&quot;&quot;&gt;
  &lt;img src=&quot;...&quot; class=&quot;img wd-60 ht-60 rounded-circle&quot; alt=&quot;&quot;&gt;
  &lt;img src=&quot;...&quot; class=&quot;img wd-60 ht-60 rounded-circle&quot; alt=&quot;&quot;&gt;
  &lt;img src=&quot;...&quot; class=&quot;img wd-60 ht-60 rounded-circle&quot; alt=&quot;&quot;&gt;
  &lt;img src=&quot;...&quot; class=&quot;img wd-60 ht-60 rounded-circle&quot; alt=&quot;&quot;&gt;
  &lt;img src=&quot;...&quot; class=&quot;img wd-60 ht-60 rounded-circle&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;</code></pre>

@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Responsive Images</a>
            <a href="#section2" class="nav-link">Image Thumbnails</a>
            <a href="#section3" class="nav-link">Aligning Images</a>
            <a href="#section4" class="nav-link">Background Image</a>
            <a href="#section5" class="nav-link">Image Toolbar</a>
            <a href="#section6" class="nav-link">Caption on Hover</a>
            <a href="#section7" class="nav-link">Image Group</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->

    @@include('./_script.html',{})
    <script>
      $(function(){
        'use strict'

        $('.img-caption').on('mouseover mouseout', function(){
          $(this).find('figcaption').toggleClass('op-0');
        });

      });
    </script>
  </body>
</html>
